<template>
    <div :id="window.getRootName() + 'PREVIEW_CONTENT'" class="canvas" :class="{ 'main-transparent' : user.getPanel() === 'true' }" :style="getCanvasStyle()">
        <!-- <div :id="system.SYSTEM_PREVIEW_BOX + item.id" class="box" v-show="getShow(item)" v-for="(item, index) in elementList" :key="index" :style="style.getBoxStyle(item)">
            <component :pageList="pageList" :is="item.component" :mode="2" :element="item" :style="style.getElementStyle(item)" :id="system.SYSTEM_PREVIEW_ELEMENT + item.id" @click.native.stop="elementClick(item)" @mouseenter.native.stop="elementEnter(item)" @mouseleave.native.stop="elementLeave(item)" />
        </div> -->
        <Bound :id="system.SYSTEM_PREVIEW_BOX + item.id" class="box" v-show="getShow(item)" v-for="(item, index) in elementList" :key="index" :style="style.getBoxStyle(item)" :element="item" :canvas="canvas" :pageList="pageList">
            <component :pageList="pageList" :is="item.component" :mode="2" :element="item" :style="style.getElementStyle(item)" :id="system.SYSTEM_PREVIEW_ELEMENT + item.id" @click.native.stop="elementClick(item)" @mouseenter.native.stop="elementEnter(item)" @mouseleave.native.stop="elementLeave(item)" />
        </Bound>
    </div>
</template>
<script>
import style from '@/js/util/style.js';
import event from '@/js/main/event.js';
import animation from '@/js/main/animation.js';
import postion from '@/js/store/postion.js';
import register from '@/js/main/register.js';
import system from '@/js/main/system.js';
import util from '@/js/util/util.js';
import bus from '@/js/event/bus.js';
import user from '@/js/util/user.js';
import elementMixin from "@/js/main/elementMixin.js";

export default {
    mixins: [elementMixin],
    props: {
        elementList: {
            require: true,
            type: Array
        },
        canvas: {
            require: true,
            type: Object
        },
        pageList: {
            require: true,
            type: Array
        }
    },
    data() {
        return {
            window: window,
            system: system,
            style: style,
            registerMap: register.elementMap,
            eventGroup: {},
            timer: null,
            user: user
        };
    },
    mounted() {
        window.addEventListener('resize', this.windowResize);
        this.windowResize();
        bus.on('elementMouseEvent', this.elementMouseEvent);
        this.elementInitEvent(this.elementList);
    },
    destroyed() {
        window.removeEventListener('resize', this.windowResize);
        bus.off('elementMouseEvent', this.elementMouseEvent);
    },
    methods: {
        elementClick(element) {
            this.elementMouseEvent(element, 'click');
        },
        elementEnter(element) {
            this.elementMouseEvent(element, 'mouseenter');
        },
        elementLeave(element) {
            this.elementMouseEvent(element, 'mouseleave');
        },
        async elementMouseEvent(element, action, attr = null) {
            if (element.event.length > 0) {
                let indexList = [];
                let indexMap = [];
                for (let i = 0; i < element.event.length; i ++) {
                    let group = element.event[i].group;
                    if (!indexMap[group]) {
                        indexMap[group] = 1;
                        indexList.push(group);
                    }
                }
                indexList.sort((a, b) => {
                    return a < b ? -1 : a > b ? 1 : 0;
                });
                if (!this.eventGroup[`${element.id}-${action}`]) {
                    this.eventGroup[`${element.id}-${action}`] = {
                        groupIndex: -1
                    };
                }
                this.eventGroup[`${element.id}-${action}`].groupIndex ++;
                for (let i = 0; i < element.event.length; i ++) {
                    let item = element.event[i];
                    if (item.group === indexList[this.eventGroup[`${element.id}-${action}`].groupIndex % indexList.length] && item.action === action && (attr ? attr.id === item.node : true)) {
                        await event[item.event](item.param, this.pageList);
                        if (item.event === 'visit') {
                            this.visitElement(item);
                        }
                    }
                }
            }
        },
        getCanvasStyle() {
            let style = {};
            if (this.canvas.layout == '3') {
                style.width = '100%';
                style.height = '100%';
            } else {
                style.width = this.canvas.width + 'px';
                style.height = this.canvas.height + 'px';
            }
            return style;
        },
        visitElement(event) {
            for (let index = 0; index < this.elementList.length; index++) {
                let element = this.elementList[index];
                if (event.param.indexOf(element.attribute.page) >= 0) {
                    if (element.animate.length) {
                        let box = document.getElementById(system.SYSTEM_PREVIEW_BOX + element.id);
                        animation.run(box, element.animate);
                    }
                    this.$nextTick(() => {
                        register.redraw(system.SYSTEM_PREVIEW_ELEMENT + element.id);
                    });
                }
            }
            this.elementInitEvent(this.elementList, event.param);
        },
        elementInitEvent(elementList, pageIndex) {
            let arrayPage = pageIndex ? pageIndex : [];
            if (arrayPage.length === 0) {
                for (let index = 0; index < this.pageList.length; index++) {
                    const visible = this.pageList[index].visible;
                    if (visible) {
                        arrayPage.push(index);
                    }
                }
            }
            for (let index = 0; index < elementList.length; index++) {
                let element = elementList[index];
                if (arrayPage.indexOf(element.attribute.page) >= 0) {
                    if (element.event.length) {
                        for (let j = 0; j < element.event.length; j++) {
                            const item = element.event[j];
                            if (item.action === 'initEvent') {
                                this.$nextTick(async () => {
                                    await event[item.event](item.param, this.pageList);
                                });
                            }
                        }
                    }
                    if (element.component == 'Group') {
                        this.elementInitEvent(element.attribute.children);
                    }
                }
            }
        },
        windowResize() {
            let width = document.documentElement.clientWidth;
            let height = document.documentElement.clientHeight;
            if (this.canvas.layout == '3') {
                for (let i = 0; i < this.elementList.length; i++) {
                    postion.setHorizontalPixel(this.elementList[i], width);
                    postion.setVerticalPixel(this.elementList[i], height);
                }
            } else {
                let scale1 = width / this.canvas.width;
                let scale2 = height / this.canvas.height;
                let canvas = document.getElementById(window.getRootName() + 'PREVIEW_CONTENT');
                if (scale1 > scale2) {
                    canvas.style.transform = `scale(${scale2})`;
                    canvas.style.left = util.toInteger((width - this.canvas.width * scale2) / 2) + 'px';
                    canvas.style.top = '0px';
                } else if (scale1 < scale2) {
                    canvas.style.transform = `scale(${scale1})`;
                    canvas.style.top = util.toInteger((height - this.canvas.height * scale1) / 2) + 'px';
                    canvas.style.left = '0px';
                } else {
                    canvas.style.transform = `scale(1)`;
                    canvas.style.top = '0px';
                    canvas.style.left = '0px';
                }
            }
        },
        getShow(item) {
            let visible = false;
            if (this.pageList[item.attribute.page].visible || item.attribute.visible) {
                visible = true;
            }
            if (this.pageList[item.attribute.page].visible === false) {
                visible = false
            }
            if (item.attribute.visible === false) {
                visible = false;
            }
            return visible
        }
    }
};
</script>
<style lang="scss" scoped>
.canvas {
    position: absolute;
    // background-color: #000000;
    transform-origin: 0 0;
}
.box {
    position: absolute;
}
</style>